<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" href="../../../codebase/webix.css" type="text/css" media="screen" charset="utf-8" />
	<script src="../../../codebase/webix.js" type="text/javascript" charset="utf-8"></script>
	<title>HTML initialization : DataTable with Pager</title>
	<script type="text/javascript">
		webix.ready(function(){ webix.markup.init(); });
	</script>
</head>
<body>
	<div data-view="datatable" data-autoheight="true" data-width="400" data-pager="mypager">
		<div data-view="column" data-width="150" data-id="firstname">
			First Name
		</div>
		<div data-view="column" data-width="150" data-id="lastname">
			Last Name
		</div>
		<div data-view="column" data-fillspace="true" data-template="{obj.value}">
			Age
		</div>

        <ul data-view="data">
            <li data-firstname="Alex" data-lastname="Wolski"> 55</li>
            <li data-firstname="Rassel" data-lastname="Brown">42</li>
            <li data-firstname="Alex" data-lastname="Wolski"> 55</li>
            <li data-firstname="Rassel" data-lastname="Brown">42</li>
            <li data-firstname="Alex" data-lastname="Wolski"> 55</li>
            <li data-firstname="Rassel" data-lastname="Brown">42</li>
            <li data-firstname="Alex" data-lastname="Wolski"> 55</li>
            <li data-firstname="Rassel" data-lastname="Brown">42</li>
            <li data-firstname="Alex" data-lastname="Wolski"> 55</li>
            <li data-firstname="Rassel" data-lastname="Brown">42</li>
            <li data-firstname="Alex" data-lastname="Wolski"> 55</li>
            <li data-firstname="Rassel" data-lastname="Brown">42</li>
            <li data-firstname="Alex" data-lastname="Wolski"> 55</li>
            <li data-firstname="Rassel" data-lastname="Brown">42</li>
            <li data-firstname="Alex" data-lastname="Wolski"> 55</li>
            <li data-firstname="Rassel" data-lastname="Brown">42</li>
            <li data-firstname="Alex" data-lastname="Wolski"> 55</li>
            <li data-firstname="Rassel" data-lastname="Brown">42</li>
            <li data-firstname="Alex" data-lastname="Wolski"> 55</li>
            <li data-firstname="Rassel" data-lastname="Brown">42</li>
            <li data-firstname="Alex" data-lastname="Wolski"> 55</li>
            <li data-firstname="Rassel" data-lastname="Brown">42</li>
	    </ul>
    </div>
	<div data-view="pager" data-id="mypager" group="10" size="3"></div>    
</body>
</html>